import { Animation } from '@ionic/core';
export function ModalFromRightEnter(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> {
    const baseAnimation = new AnimationC();
    // 背景动画
    const backdropAnimation = new AnimationC();
    const backdropElem = baseEl.querySelector('ion-backdrop');
    backdropAnimation.addElement(backdropElem);
    backdropAnimation.beforeStyles({ 'z-index': 0, opacity: 0.0, visibility: 'visible' });
    // 主wrapper的动画配置
    const wrapperAnimation = new AnimationC();
    const wrapperElem = baseEl.querySelector('.modal-wrapper');
    wrapperAnimation.addElement(wrapperElem);
    wrapperAnimation.keyframes([
        { offset: 0, opacity: '0.0', transform: 'scale(1)' },
        { offset: 1, opacity: '0.99', transform: 'scale(1)' }
      ]
      );
    wrapperAnimation.fromTo('transform', 'translateX(1000px)', 'translateX(0px)' );
    //
    return Promise.resolve(baseAnimation
        .duration(500)
        .easing('ease-out')
        .add(backdropAnimation)
        .add(wrapperAnimation));
}

export function ModalFromRightLeave(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> {
    const baseAnimation = new AnimationC();
    // 背景动画
    const backdropAnimation = new AnimationC();
    const backdropElem = baseEl.querySelector('ion-backdrop');
    backdropAnimation.addElement(backdropElem);
    backdropAnimation.beforeStyles({ visibility: 'hidden' });
    // 主wrapper的动画配置
    const wrapperAnimation = new AnimationC();
    const wrapperElem = baseEl.querySelector('.modal-wrapper');
    wrapperAnimation.addElement(wrapperElem);
    wrapperAnimation.keyframes([
        { offset: 0, opacity: '0.99', transform: 'scale(1)' },
        { offset: 1, opacity: '0.1', transform: 'scale(1)' }
      ]
      );
    wrapperAnimation.fromTo('transform', 'translateX(0px)', 'translateX(1000px)');
    return Promise.resolve(baseAnimation
        .duration(500)
        .easing('ease-out')
        .add(backdropAnimation)
        .add(wrapperAnimation));
}

